<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vertical-align</title>
        <style>
            
            /*div {
                border: 2px solid black;
            }

            div>* {
                background: red;
                vertical-align: baseline;
                display: inline-block;
            }

            div>a {
                width: 30px;
                height: 30px;
                background: yellow;
            }

            div>span {
                line-height: 50px;
                display: inline-block;
                height: 50px;
            }
*/  

            .box {
                height: 100px;
                background: red;
            }

            .box>a {
                background: yellow;
                vertical-align: middle;
            }

            .box>em {
                display: inline-block;
                height: 100%;
                /*width: 10px;*/
                background: yellow;
            }

            .vm::after {
                content: "";
                display: inline-block;
                height: 100%;
                vertical-align: middle;
            }

            .vm>* {
                vertical-align: middle;
            }


        </style>
    </head>
    <body>
        <div>
            <a href=""></a>
            <a href=""></a>
            <span>大家好</span>
        </div>

        <div class="box vm">
            <a href="">你好</a>
            <em></em>
        </div>

        
    </body>
</html>